<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="./lib/vue-2.4.0.js"></script>
    <script type="text/javascript" src="./lib/vue-router-3.0.1.js"></script>
  </head>

  <body>
    <div id="app">
      <router-link to="/account">Account</router-link>

      <router-view></router-view>
    </div>

    <template id="tmpl">
      <div>
        <h1>这是Account组件</h1>
        <router-link to="/login">登陆</router-link>
        <router-link to="/account/register">注册</router-link>

        <router-view></router-view>
      </div>
    </template>

    <script type="text/javascript">
      // 组件的模板对象（注册为路由组件模版）
      var account = {
        template: "#tmpl"
      };
      var login = {
        template: "<h3>登录</h3>",
        data() {
          return {};
        },
        created() {
          // 组件的生命周期钩子函数
          console.log(this.$route);
          // console.log( this.$route.query.id );
        }
      };

      var register = {
        template: "<h3>注册</h3>"
      };

      var router = new VueRouter({
        routes: [
          // 父路由匹配规则
          {
            path: "/account",
            component: account,
            // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
            children: [
              { path: "/login", component: login },
              { path: "register", component: register }
            ]
          }
          // { path: '/account/login', component: login },
          // { path: '/account/register', component: register }
        ]
      });

      // 创建 Vue实例，得到 ViewModel
      var vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        // router: router
        router
      });
    </script>
  </body>
</html>
